<template>
	<view class="margin-top-sm flex-row active-item"
	hover-class="hover-class"
		@click="onDetail(options.pkId)">
		<image class="active-item_cover" 
		:src="options.cover? imgURL2+options.cover : imgURL3+'index/active.png'"
		mode="aspectFill" >
		</image>
		<view class="margin-left-xs l-f1" style="width: 370rpx;">
			<view class="text-overhidden-1">{{ options.name }}</view>
			<view class="text-sm margin-top-xs">活动日期：{{ options.startDatetime }}</view>
			<view class="flex-row-bt margin-top-xs" style="">
				<view class="text-sm ">已报名/总人数：{{ options.signedCount }}/{{ options.maxCount }}</view>
				<view class="theme-bg-color text-white active-item_btn">我要报名</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { imgURL2, imgURL3 } from '@/api/request';
	defineProps({
		options: {
			required: true,
			type: Object,
			default() {
				return {}
			}
		}
	})
	const onDetail = (id: string) =>{
		uni.navigateTo({
			url: `/pages/active/details?id=${id}&falg=0`
		})
	}
</script>

<style scoped lang="scss">
.active-item {
	&_cover {
		width: 240rpx;
		height: 140rpx;
		border-radius: 18rpx;
	}
	&_btn {
		box-sizing: border-box;
		padding: 0 15rpx;
		height: 44rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 44rpx;
		border-radius: 12rpx;
	}
}
</style>